<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>基础：9、表单控件绑定  修饰符</title>
	<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<!-- 
			.lazy: lazy就是懒惰的意思，原来表单input的效果是只要输入正在发生变化，则vm.msg实时改变
				   加了lazy后只有在输入完成鼠标对表单失焦时vm.msg才更新为最新输入
		-->
		<input v-model.lazy="msg">
		<p>{{ msg }}</p><br/><br/>


		<!-- 
			如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），
			可以添加一个修饰符 number 给 v-model 来处理输入值
		 -->
		<input v-model.number="age" type="number">
		<p>{{ age }}</p><br/><br/>

		<!-- 
			.trim: 这个很明显了，很多语言或框架中都有trim或类似的函数，用来去除字符串或输入的前后空格
		 -->
		<input v-model.trim="txt">
		<p>{{ txt }}</p>
	</div>

	<script type="text/javascript">
		var vm = new Vue({
			el: '#app',
			data: {
				msg: 'vue',
				age: 0,
				txt: ' codeman  '
			},
			watch: {
				age: function(newVal, oldVal){
					console.log(newVal, oldVal)
				}
			}
		})
	</script>
</body>
</html>
<!-- 代码均通过测试，有什么纰漏欢迎联系 QQ:1123176978  Wechat:hyhlovehuanong -->